<template>
   <div class="qtlist">
       <h4>站点管理</h4>
       <div class="container" style="">
             <div class="filter-box" style="margin-bottom:20px;">
                <div style="overflow:hidden;">
                    <el-button type="primary" size="mini" style="float:right" @click="searchSite()">搜索</el-button>
                    <div class="demo-input-suffix" style="margin-right:30px;display:inline-block;float:right">
                        <el-input placeholder="请输入站点名称"  clearable
                                v-model="siteName" class="filter-input" 
                                @keyup.enter.native="searchSite()"></el-input>
                     </div>
                    <el-button  type="primary"  size="mini" 
                                style="float:left;" @click="to_add()">
                                新增站点</el-button>
                 </div>
             </div>
             <div class="table-box" style="padding:20px;border:1px solid #ddd;">
               <el-table v-loading="loading" :data="data" border style="width: 100%;" ref="multipleTable" stripe>
                    <el-table-column type="index"  width="60" label="序号" align="center" :index="indexMethod"></el-table-column>
                    <el-table-column prop="siteName" label="站点名称" width="130" align="center"></el-table-column>
                    <el-table-column prop="linkMan" label="站点联系人" width="100" align="center">
                    </el-table-column>
                    <el-table-column prop="tel" label="站点联系方式" width="120" align="center"></el-table-column>
                     <el-table-column prop="openTime" label="开放时间" width="180" align="center"></el-table-column>
                    <el-table-column prop="siteLocation" label="地区" align="center"  width="140">
                    </el-table-column>
                    <el-table-column prop="belongBaseName" label="所属养殖基地" align="center" width="140">
                    </el-table-column>
                    <el-table-column label="操作"  align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" @click="handleDetail(scope.row.id)">详情</el-button>
                                <el-button size="mini" type="warning" @click="handleEdit(scope.row.id)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDel( scope.row.id)">删除</el-button>
                            </template>
                   </el-table-column>
               </el-table>
             </div>
              <div class="pagination" style="margin-bottom:0px;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="getPageNum"
                        :page-sizes="[10, 20, 50,100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
              </div>
          
      </div>
  </div>  
</template>

<script>
import { siteList,delSite } from '@/request/api'

export default {
    data(){
        return {
           loading:true,
           data: [],
           total:0,
           value: '',
           siteName:'', // 站点名称
           pageSize:10,
           pageNum: 1
        }
    },
    created(){
       this.get_siteList();
    },
    methods:{
      indexMethod(index) {
        return   this.pageSize*(this.pageNum-1) + 1 + index;
      },
      searchSite(){
         this.get_siteList();
      },
      handleDetail(id){
        //  详情
         this.$router.push({
             path:`/site/detail_site/${id}`
         })
      },  
      handleEdit(id){
         //  编辑
         this.$router.push({
            path:`/site/edit_site/${id}`
         })
      },
      to_add(){
          // 新增
        this.$router.push({
            path:'/site/add_site'
        })
      },
      // 当前页
      getPageNum(e){
         this.pageNum = e;
         this.get_siteList();
      },
      //当前页显示多少页
      handleSizeChange(e){
         this.pageSize = e;
         this.get_siteList();
      },
      get_siteList(){
          siteList({
              siteName:this.siteName,
              pageNum:this.pageNum,
              pageSize:this.pageSize
          }).then(res => {
              this.total = res.total;
              this.data = res.rows;
              this.loading = false;
          })
      },
      // 删除站点
      handleDel(id){
          this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
         }).then(()=>{
             delSite({
                 id:id
             }).then(res => {
                 console.log(res);
                 if(res.code ==1) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.get_siteList()
                 }
             })
            

         }).catch(()=>{
              this.$message({
                    type: 'info',
                    message: '已取消删除'
              });  
         }) 
      }
    }
 }
</script>
<style  scoped>
.qtlist {
        width:100%;
        height: 100%;
}
.qtlist h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}

.handle-box {
  margin-bottom: 20px;
}



.filter-input {
  width: 200px;
  display: inline-block;
}

</style>